import useRequest, { BASE_AREA, BASE_URL } from '../../../hooks/use-request';
import React, { useEffect, useState } from 'react';
import { Card, Grid } from 'antd-mobile';
import styles from '../index.module.css';
// 定义租房小组的数据类型
interface IGroups {
  id: number;
  title: string;
  desc: string;
  imgSrc: string;
}

export const Groups = () => {
  const [groups, setGroups] = useState<IGroups[]>([]);

  const { loading, result } = useRequest('/home/groups', BASE_AREA, undefined);
  useEffect(() => {
    if (!result) return;
    const { body: data } = result;
    setGroups(data);
  }, [result, loading]);

  if (loading) return null;

  const groupItems = groups?.map((item) => {
    return (
      <Grid.Item key={item.id}>
        <Card>
          <div className={styles.desc}>
            <p className={styles.title}>{item.title}</p>
            <span className={styles.info}>{item.desc}</span>
          </div>
          <img
            src={`${BASE_URL}${item.imgSrc}`}
            alt={item.title}
            className={styles.groupsImg}
          />
        </Card>
      </Grid.Item>
    );
  });

  return (
    <div className={styles.groups}>
      <h3 className={styles.groupsTitle}>
        租房小组
        <span className={styles.more}>更多</span>
      </h3>
      <Grid columns={2} gap={10}>
        {groupItems}
      </Grid>
    </div>
  );
};
